<!--
 * @Author: JiraiyaChen 49619401+JiraiyaChen@users.noreply.github.com
 * @Date: 2024-01-15 16:53:32
 * @LastEditors: JiraiyaChen 49619401+JiraiyaChen@users.noreply.github.com
 * @LastEditTime: 2024-01-16 14:24:25
 * @Description: 关联字段key 的 el-form-item
-->

<template>
  <el-form-item label="关联字段key">
    <el-select v-model="props.fieldName" clearable @change="handleChangeField">
      <template v-if="props.customType === 'subComp'">
        <el-option
          style="width: 100%"
          v-for="item in subFormFieldNameList"
          :key="item.dbFieldName"
          :label="item.dbFieldTxt"
          :value="item.dbFieldName"
        />
      </template>
      <template v-else>
        <el-option
          style="width: 100%"
          v-for="item in fieldNameList"
          :key="item.dbFieldName"
          :label="item.dbFieldTxt"
          :value="item.dbFieldName"
        />
      </template>
    </el-select>
  </el-form-item>
</template>

<script>
export default {
  name: "AssociatedFieldKey",
  props: ["props"],

  components: {},
  data() {
    return {
      subFormFieldNameList: [{ dbFieldName: "test1", dbFieldTxt: "test1" }],
      fieldNameList: [{ dbFieldName: "test2", dbFieldTxt: "test2" }],
    };
  },
  methods: {
    handleChangeField(val) {
      // 更改绑定字段时，自动更新字段名称
      if (this.props.customType === "subComp") {
        this.props.label = this.subFormFieldNameList.find(
          (i) => i.dbFieldName === val
        )?.dbFieldTxt;
      } else {
        this.props.label = this.fieldNameList.find(
          (i) => i.dbFieldName === val
        )?.dbFieldTxt;
      }
      this.$forceUpdate();
    },
  },
  mounted() {},
  watch: {},
  computed: {},
  filters: {},
  beforeDestroy() {},
};
</script>

<style scoped lang="scss">
::v-deep .el-select {
  width: 100%;
}
</style>
